<template>
  <div class="Bus">
    <div style="font-size: 32px">使用Bus类来实现发布者订阅者模式</div>
    <Publisher ref="publisher" class="box"></Publisher>
    <Subscriber ref="subscriber" class="box"></Subscriber>
  </div>
</template>

<script>
import Publisher from "@/components/Bus/Publisher";
import Subscriber from "@/components/Bus/Subscriber";

export default {
  name: "Bus",
  components: {
    Publisher, Subscriber
  },
  mounted() {
    const pBus = this.$refs.publisher.getBus()
    const sBus = this.$refs.subscriber.getBus()
    console.log('检测Bus是否为单例',pBus === sBus)
  }
}
</script>

<style scoped>
.Bus {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  margin-top: 20px;
  width: 300px;
  height: 300px;
  padding: 10px;
  background: #f1f1f1;
}
</style>
